<template>
  <div class="dh-tooltip" ref="dhTooltip" :id="elId">
    <!-- 默认占位插槽 -->
    <slot></slot>
    <!-- 提示内容插槽 -->
    <div
      v-if="isShow"
      class="dh-tooltip-popup"
      :class="{
        'dh-tooltip-popup-activity': isShow,
        'dh-tooltip-popup-url': !!contentBg,
        'dh-tooltip-popup-bottom': !contentBg && placement == 'bottom',
        'dh-tooltip-popup-top': !contentBg && placement == 'top',
      }"
      :style="styleObj"
    >
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script lang="ts" setup name="dhTooltip">
import { useRect } from "@vant/use";
import { useEventListener } from "@vueuse/core";

const props = withDefaults(
  defineProps<{
    // 显示位置
    placement?: string;
    // 背景图片
    contentBg?: string;
    // 偏移量
    offset?: number;
    // 偏移量
    offsetSj?: number;
    // 显示宽度px
    width?: string;
    minWidth?: string;
    // 样式
    styleSlot?: any;
  }>(),
  {
    placement: "bottom",
    contentBg: "",
    offset: 0,
    offsetSj: 60,
    width: "auto",
    minWidth: "auto",
    styleSlot: {},
  }
);

const emit = defineEmits(["initCall", "close"]);
const elId = `${Date.now()}-zhj`; // 用于匹配点击的是不是当前元素
const isShow = ref(false);
const dhTooltip = ref(null);
// 获取当前元素位置
const dhTooltipReact = computed(() => {
  if (dhTooltip.value) {
    return useRect(dhTooltip.value);
  } else {
    return {};
  }
});

const styleObj = computed(() => {
  const mr = {
    "background-image": props.contentBg ? `url('${props.contentBg}')` : "",
  };

  return { ...mr, ...props.styleSlot };
});
// 三角形偏移量
const offsetSjPx = computed(() => {
  return `${props.offsetSj * 2}px`;
});

//  整体偏移量
const offsetPx = computed(() => {
  return `${props.offset * 2}px`;
});

// 显示、隐藏元素
const isShowTooltip = (val: boolean) => {
  isShow.value = val;
  // console.log("是否 -- 显示弹窗 --", isShow.value);
};

// 点击空白地方隐藏弹窗
const cleanup = useEventListener(document, "click", (e) => {
  if (
    isShow.value &&
    e.target &&
    e.target.offsetParent &&
    e.target.offsetParent.id != elId
  ) {
    isShow.value = false;
    // console.log( "是否 -- 关闭 -- 弹窗 --", isShow.value);
    emit("close"); // 关闭通知
  }
  // console.log(e, "--点击了空白处--", e.target.offsetParent.className);
});

onMounted(() => {
  // 将显示方法，传递出去
  if (isShowTooltip) {
    emit("initCall", isShowTooltip);
  } else {
    setTimeout(() => {
      emit("initCall", isShowTooltip);
    }, 1000);
  }
});
onBeforeUnmount(() => {
  if (process.client) {
    cleanup();
  }
});
</script>

<style lang="scss">
.dh-tooltip {
  position: relative;
  width: v-bind("width");
  min-width: v-bind("minWidth");
}

.dh-tooltip-popup {
  z-index: 99;
  display: none;
  position: absolute;
  left: 0;
  backdrop-filter: blur(12px);
}

.dh-tooltip-popup-bottom {
  top: 6.3vw; // 50.5px;
  background-color: rgba(10, 31, 106, 40%);
  border-radius: 12 * 2px;
}
.dh-tooltip-popup-bottom::before {
  content: "";
  position: absolute;
  top: -1.2vw; //-9.5px; // -1.237vw;
  left: v-bind("offsetSjPx");
  border-top: 0;
  border-right: 21px solid rgba(10, 31, 106, 40%);
  border-bottom: 21px solid transparent;
  transform: rotate(-45deg);
}

.dh-tooltip-popup-top {
  bottom: 50px;
  background-color: rgba(10, 31, 106, 40%);
  border-radius: 12 * 2px;
}
.dh-tooltip-popup-top::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: v-bind("offsetSjPx");
  border-top: 0;
  border-right: 20px solid rgba(10, 31, 106, 40%);
  border-bottom: 20px solid transparent;
  transform: rotate(135deg);
}

.dh-tooltip-popup-activity {
  display: block;
  width: v-bind("width");
  left: v-bind("offsetPx");
  right: v-bind("dhTooltipReact.right || 0");
}
// 图片属性
.dh-tooltip-popup-url {
  background-color: initial;
  background-size: 100% 100%;
  background-position: 0px 0px;
  background-repeat: no-repeat;
}
</style>
